/* 假数据 */
const quizData = [
  {
    question: "Which language runs in a web browser?",
    a: "Java",
    b: "C",
    c: "Python",
    d: "JavaScript",
    correct: "d",
  },
  {
    question: "What does CSS stand for?",
    a: "Central Style Sheets",
    b: "Cascading Style Sheets",
    c: "Cascading Simple Sheets",
    d: "Cars SUVs Sailboats",
    correct: "b",
  },
  {
    question: "What does HTML stand for?",
    a: "Hypertext Markup Language",
    b: "Hypertext Markdown Language",
    c: "Hyperloop Machine Language",
    d: "Helicopters Terminals Motorboats Lamborginis",
    correct: "a",
  },
  {
    question: "What year was JavaScript launched?",
    a: "1996",
    b: "1995",
    c: "1994",
    d: "none of the above",
    correct: "b",
  },
];

/* 获取元素 */
const quiz = document.getElementById("quiz");
const answerEls = document.querySelectorAll(".answer");
const questionEl = document.getElementById("question");
const a_text = document.getElementById("a_text");
const b_text = document.getElementById("b_text");
const c_text = document.getElementById("c_text");
const d_text = document.getElementById("d_text");
const submitBtn = document.getElementById("submit");

/* 初始化 */
let currentQuiz = 0;
let score = 0;
/* 将假数据添加到页面上 */
loadQuiz();
/**
 *
 * @returns answer为空或者是answerEl.id
 */
function getSelected() {
  let answer;
  /* 循环answerEls中所有元素 */
  answerEls.forEach((answerEl) => {
    /* 判断每个元素的radio是否被点击了 */
    if (answerEl.checked) {
      /* 将当前元素的id赋值给answer */
      answer = answerEl.id;
    }
  });

  return answer;
}
function loadQuiz() {
  /* 将answerEls中的所有元素的checked 属性置为false */
  deselectAnswers();
  /* 取出quizData中的第0个元素 */
  const currentQuizData = quizData[currentQuiz];
  /* 将第0个元素的内容添加到页面上 */
  questionEl.innerText = currentQuizData.question;
  a_text.innerText = currentQuizData.a;
  b_text.innerText = currentQuizData.b;
  c_text.innerText = currentQuizData.c;
  d_text.innerText = currentQuizData.d;
}

function deselectAnswers() {
  /* 将answerEls中的所有元素的checked 属性置为false */
  answerEls.forEach((answerEl) => (answerEl.checked = false));
}

/* 提交按钮 */
submitBtn.addEventListener("click", () => {
  const answer = getSelected();
  /* 有元素的radio是否被点击了 */
  if (answer) {
    /* 判断是否答对了 */
    if (answer === quizData[currentQuiz].correct) {
      /* 答对了分数+1 */
      score++;
    }
    /* 下标+1 */
    currentQuiz++;
    /* 判断当前的下标有没有超过假数据的最大长度 */
    if (currentQuiz < quizData.length) {
      /* 重新在页面上添加数据 */
      loadQuiz();
    } else {
      quiz.innerHTML = `
              <h2>You answered ${score}/${quizData.length} questions correctly</h2>

              <button onclick="location.reload()">Reload</button>
          `;
    }
  }
});
